window.onload = function () {
  // ----------------------------------饼图start---------------------------------------
  // 基于准备好的dom，初始化echarts实例
  var myPieChart = echarts.init(document.querySelector(".row>.pie"));

  // 指定图表的配置项和数据
  var option = {
    //标题
    title: {
      text: "籍贯 Hometown",
      textStyle: {
        color: "#6d767e",
      },
    },
    //鼠标移入的提示
    tooltip: {
      //内容格式
      formatter: `{a}<br/>{b}<strong>{c}</strong>人 占比{d}%`,
    },
    series: [
      {
        //系列名称
        name: "各地人员分布",
        //图例类型,pie表示饼图
        type: "pie",
        //饼图的半径,数组第一个是内半径,第二个是外边距
        radius: ["10%", "65%"],
        //饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
        //支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。
        center: ["50%", "50%"],
        //是否展示成南丁格尔图
        //radius圆心角和半径 都区分数据大小
        //area 圆心角一样,仅通过半径大小区分数据大小
        roseType: "area",
        //每一项的样式设置
        itemStyle: {
          //每一项的圆角设置
          borderRadius: 4,
        },
        data: [
          {
            value: 40,
            name: "北京",
          },
          {
            value: 8,
            name: "山东",
          },
          {
            value: 32,
            name: "上海",
          },
          {
            value: 30,
            name: "江苏",
          },
          {
            value: 28,
            name: "河北",
          },
          {
            value: 6,
            name: "山西",
          },
          {
            value: 22,
            name: "河南",
          },
          {
            value: 8,
            name: "辽宁",
          },
        ],
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  // myChart.setOption(option);

  // -----------------------------------折线图start---------------------------------------

  // 基于准备好的dom，初始化echarts实例
  var myLineChart = echarts.init(document.querySelector(".row>.line"));
  // 指定图表的配置项和数据
  var lineOption = {
    // 标题
    title: {
      text: "薪资 Salary",
      textStyle: {
        color: "#6d767e",
      },
    },
    // 鼠标移入的提示
    tooltip: {
      trigger: "axis", // 轴触发
      position: function (pt) {
        // pt是一个数组，pt[0]表示横坐标位置，'10%'表示Y轴方向始终保持距离顶部10%的距离
        // 所以意思是，提示框的位置会跟随鼠标左右移动，但纵向上的位置始终保持不变。
        return [pt[0], "10%"];
      },
    },
    // 图例
    legend: {
      top: 20,
    },

    xAxis: {
      type: "category",
      boundaryGap: false, // x轴两边的留白策略，false表示不留空白
      data: [
        "张三",
        "李四",
        "张飞",
        "赵云",
        "狗哥",
        "张三",
        "李四",
        "张飞",
        "赵云",
        "狗哥",
        "张三",
        "李四",
        "张飞",
        "赵云",
        "狗哥",
        "张三",
        "李四",
        "张飞",
        "赵云",
        "狗哥",
      ],
    },
    yAxis: {
      type: "value",
      // Y轴类型为value，则留白策略指的是对数据的延伸。
      // 比如，图表中的数据最大值是17000，则Y轴最大数字大约是 17000 + 17000 * 50%
      boundaryGap: [0, "50%"],
    },
    // 数据缩放组件
    dataZoom: [
      // {
      //   type: 'inside', // 将拖动的条内置到轴里面，看不见了，但是可以拖动
      //   start: 0,
      //   end: 10
      // },
      {
        type: "slider", // 拖动条显示到轴的外面（默认就是slider类型）
        start: 0, // 拖动滑块起始位置（这是一个百分比）
        end: 15, // 拖动滑块结束位置（这是一个百分比）
      },
    ],
    // 数据部分
    series: [
      {
        name: "期望薪资",
        type: "line",
        smooth: true, // 表示使用平滑曲线
        symbol: "none", // 线上拐点位置的样式，none表示没有；也可以是实心圆、空心圆、方块.....
        itemStyle: {
          // 单独控制这条线的颜色
          color: "#ee6666",
        },
        data: [
          8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000,
          8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000,
        ],
      },
      {
        name: "实际薪资",
        type: "line",
        smooth: true,
        symbol: "none",
        itemStyle: {
          // 单独控制这条线的颜色
          color: "#5470c6",
        },
        data: [
          9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300,
          9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 13000,
        ],
      },
    ],
  };

  // myLineChart.setOption(lineOption);
  // 使用刚指定的配置项和数据显示图标

  // -----------------------------------迁徙图start---------------------------------------
  // 基于准备好的dom，初始化echarts实例
  var myMapChart = echarts.init(document.querySelector(".row>.map"));

  // 指定图表的配置项和数据
  var mapOption = {
    //标题
    title: {
      text: "来穗路线",
      left: "left",
    },

    // legend: {
    //     data: ['广州']
    // },
    //地图
    geo: {
      //用什么地图
      map: "china",
      //可以用鼠标缩放和平移
      roam: true,
      //缩放的极限值
      scaleLimit: {
        max: 4,
        min: 0.8,
      },
      //缩放
      zoom: 1.2,
      //每一项
      itemStyle: {
        //默认情况下
        normal: {
          borderColor: "#516a89", //边框
          borderWidth: "1", //边框大小
        },
        //鼠标移入高亮的颜色
        emphasis: {
          color: "rgba(37, 43, 61, .5)",
        },
      },
      //鼠标移入高亮时,不要文字
      emphasis: {
        label: {
          show: false,
        },
      },
    },
    series: [
      {
        type: "lines",
        name: "广州",
        //层级,数字越大图案就越上面
        zlevel: 1,
        //线条的样式
        lineStyle: {
          //color:'rgb(255,0,0)',
          //正常情况
          normal: {
            width: 1, //宽
            opacity: 1, //透明度
            curveness: 0.2, //线条弯曲曲线
          },
        },
        //线条特效
        effect: {
          show: true,
          period: 4, //特效的时长
          symbol: "arrow", //特效图形标记
          symbolSize: 5, //特效图形标记的大小
          trailLength: 0.2, //特效尾迹长度
        },
        //数据
        data: [
          {
            // coords:[
            //     [114,30],  //起点
            //     [112,22]   //终点
            // ]
          },
        ],
      },
      {
        //标记点
        markPoint: {
          itemStyle: {
            color: "green",
          },
          show: true,
          label: {
            formatter: "黑马程序员",
            color: "green",
            // 绝对的像素值
            position: [30, 0],
          },
          data: [
            {
              coord: [112, 22], //广州经纬度
            },
          ],
        },
        //涟漪圈圈
        type: "effectScatter",
        //该系列使用的坐标系 geo表示地理坐标系
        coordinateSystem: "geo",
        //层级
        zlevel: 3,
        //特效
        rippleEffect: {
          period: 4, //动画的周期，秒数
          number: 1, //个数
          brushType: "stroke", //波纹的绘制方式, stroke是击打  fill充满
          scale: 2, //波纹的最大缩放比例。
        },
        //文本
        label: {
          normal: {
            show: true,
            position: "right", //文字位置
            offset: [5, 0], //文字偏移
            //文字
            // formatter:'哈哈',
            formatter: function (params) {
              // return console.log(params);
              return params.data.name;
            },
            fontSize: 12,
          },
        },
        //涟漪点的图形-圆形
        symbol: "circle",
        //涟漪点的样式
        itemStyle: {
          normal: {
            show: false,
            color: "#f00", //红色
          },
        },
        //数据
        // data: [
        //   // [114, 30],
        //   // [112,22]
        // ],
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  // myMapChart.setOption(mapOption);

  // 发送Ajax请求获取学生信息
  axios({
    url: "/student/list",
  }).then((res) => {
    //console.log(res);
    // 判断返回结果
    if (res.status == 200 && res.data.code == 0) {
      //返回的全部学生数组
      let arr = res.data.data;
      // -----------------饼图的真实数据---------------------------------------------
      let pieArr = [{ value: 0, name: arr[0].province }];
      // 遍历arr 找到每一个学生的省份
      arr.forEach((v) => {
        // v.province 遍历出来的学生的省份
        // 假设法
        // 提出假设
        let flag = false;
        for (let i = 0; i < pieArr.length; i++) {
          if (v.province == pieArr[i].name) {
            flag = true;
            //   在就value++
            pieArr[i].value++;
            return;
          }
        }
        // 不在做处理
        if (flag == false) {
          pieArr.push({ value: 1, name: v.province });
        }
      });
      //console.log(pieArr);
      // 把饼图中的数据数组给替换
      option.series[0].data = pieArr;
      // 根据新的数据重新渲染echart图表
      myPieChart.setOption(option);

      // -----------------线形图的真实数据---------------------------------------------
      let lineName = []; //线形图需要的名字数组
      let lineSalary = []; //线形图需要的薪资组
      let lineTrueSalary = []; //线形图需要的真实薪资组
      arr.forEach((item) => {
        lineName.push(item.name);
        lineSalary.push(item.salary);
        lineTrueSalary.push(item.truesalary);
      });
      // 用真实数据数组,替换线性途中的数据,并渲染
      lineOption.xAxis.data = lineName;
      lineOption.series[0].data = lineSalary;
      lineOption.series[1].data = lineTrueSalary;

      myLineChart.setOption(lineOption);
      // -----------------迁徙图的真实数据---------------------------------------------
      mapOption.series[0].data = arr.map((item) => {
        return {
          coords: [
            [item.jing, item.wei], //起点
            [112, 22], //终点
          ],
        };
      });
      // 迁徙图的涟漪点真实数据
      mapOption.series[1].data = arr.map((item) => {
        return {
          // name: item.city,
          value: [item.jing, item.wei],
        };
      });
      myMapChart.setOption(mapOption);
    }
  });
  // -----------------------------------柱状图start---------------------------------------

  var myBarChart = echarts.init(document.querySelector(".bar>.barChart"));
  // 指定图表的配置项和数据
  var barOption = {
    //鼠标移入的提示
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },
    legend: {
      data: ["平均分", "低于60分人数", "60到80之间", "高于80分人数"],
    },
    grid: {
      top: 30,
      bottom: 30,
      left: "7%",
      right: "7%",
    },
    xAxis: [
      {
        type: "category",
        data: ["1组", "2组", "3组", "4组", "5组", "6组", "7组"],
        axisPointer: {
          type: "shadow",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        min: 0,
        max: 100,
        interval: 10,
        show: true,
        axisLabel: {
          formatter: "{value}分",
        },
      },
      {
        type: "value",
        min: 0,
        max: 10,
        interval: 1,
        show: true,
        axisLabel: {
          formatter: "{value}人",
        },
      },
    ],
    series: [
      {
        name: "平均分",
        type: "bar",
        //每一个条之间的间隙
        barGap: "10%",
        //柱状条的宽度
        barWidth: "20%",
        //高亮的样式
        emphasis: {
          focus: "none",
        },
        data: [83, 57, 90, 78, 66, 76, 77, 87, 69, 92, 88, 78],
        //使用的是第一条Y轴
        yAxisIndex: 0,
      },
      {
        name: "低于60分人数",
        type: "bar",
        data: [2, 1, 3, 4, 2, 5, 2, 2, 4, 1, 6, 2],
        //使用的是第二条Y轴
        yAxisIndex: 1,
      },
      {
        name: "60到80之间",
        type: "bar",
        data: [3, 2, 1, 5, 1, 2, 3, 4, 5, 2, 2, 4],
        //使用的是第二条Y轴
        yAxisIndex: 1,
      },
      {
        name: "高于80分人数",
        type: "bar",
        data: [3, 2, 1, 5, 1, 2, 3, 4, 5, 2, 2, 4],
        //使用的是第二条Y轴
        yAxisIndex: 1,
      },
    ],
  };
  // 使用刚指定的配置项和数据显示图表。
  // myBarChart.setOption(barOption);
  // 柱状图使用真实的数据
  function getScore(cishu = 1) {
    axios({
      method: "get",
      url: "/score/batch",
      params: {
        batch: cishu,
      },
    }).then((res) => {
      //console.log(res);
      let obj = res.data.data;
      if (res.status == 200 && res.data.code == 0) {
        barOption.xAxis[0].data = obj.group.map((item) => {
          return item + "组";
        });
        barOption.series[0].data = obj.avgScore; //平均分
        barOption.series[1].data = obj.lt60; //小于60分
        barOption.series[2].data = obj.gt60; //60-80之间
        barOption.series[3].data = obj.gt80; //高于80分
        myBarChart.setOption(barOption);
      }
    });
  }
  getScore();
  // 点击三个点,成绩菜单显示或隐藏
  let batchUl = document.querySelector("#batch");
  document.querySelector(".bar span.btn").onclick = function () {
    if (batchUl.style.display == "none") {
      batchUl.style.display = "block";
    } else {
      batchUl.style.display = "none";
    }
  };
  // 给第几次点击li标签注册单击事件
  batchUl.querySelectorAll("li").forEach((item, index) => {
    item.onclick = function () {
      getScore(index + 1);
    };
  });

  // 班级概况
  // 发送Ajax请求
  axios({
    url: "/student/overview",
  }).then((res) => {
    console.log(res);
    let obj = res.data.data;
    if (res.status == 200 && res.data.code == 0) {
      // 班级总人数
      document.querySelector(".overview .total").innerHTML = obj.total;
      // 班级平均薪资
      document.querySelector(".overview .avgSalary").innerHTML = obj.avgSalary;
      // 班级平均年龄
      document.querySelector(".overview .avgAge").innerHTML = obj.avgAge;
      // 班级男女比例
      document.querySelector(".overview .proportion").innerHTML =
        obj.proportion;
    }
  });
};
